<template>
    <div class="bookshelfList">
        <van-swipe-cell v-for="(item,index) in Book.fictionshelf.list" :key="index">
            <div class="item">
            <van-image :src="item.image" height="100%" width="65" 
            class="image" @click="bookRead(item)"/>
            <div class="bookInfo"  @click="bookRead(item)">
                <div class="name">
                    {{ item.fictionName }}
                    <span class="ddd h" v-if="item.newChapter == 1"></span>
                </div>
                <div class="fictionAuthor" v-if="item.chapterLength - 1 > item.chapterNum">
                    {{ item.fictionAuthor }}
                    <span class="ddd"></span>
                    {{ item.chapterLength - 1 - item.chapterNum }}章未读
                </div>
                <div class="fictionAuthor" v-else>
                    {{ item.fictionAuthor }}
                    <span class="ddd"></span>
                    已读完
                </div>
                <div class="van-ellipsis">
                    {{ item.status == 0 ? '连载' : '完结'}}
                    <span class="ddd"></span>
                    {{ item.newChapter == 0 ? item.chapterName : item.newChapterName }}
                </div>
            </div>
        </div>
            <template #right>
                <van-button square @click="del(item)" text="删除" type="danger" class="delete-button" />
            </template>
        </van-swipe-cell>
    </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import { getFictionShelfDel } from '@/api/fictionShelf'
import { ArrIndexOf } from '@/assets/js/Tools'
export default {
    data() {
        return {
            
        }
    },
    created(){
    },
    computed : {
        ...mapState(['Book'])
    },
    methods : {
        ...mapMutations(['getFictionShelfList']),

        bookRead(item){
            this.$router.push({
                path : '/bookRead',
                query : {
                    fid : item.fictionId,
                    chapterNum : item.chapterNum,
                    fName : item.fictionName,
                    cid : item.fictionChapterId,
                }
            })
        },

        // 删除
        del(item){
            this.$Dialog.confirm({
                title : '确认要删除吗？'
            }).then(() => {
                getFictionShelfDel({
                    type : item.type,
                    fid : item.fictionId
                }).then(res => {
                    if(res.code == 200){
                        let i = ArrIndexOf(this.Book.fictionshelf.list, item, 'fictionId')
                        this.Book.fictionshelf.list.splice(i, 1)
                    }
                })
            }).catch(() => {})
        }
    }
}
</script>

<style scoped>
.bookshelfList{
    
}
.item{
    position: relative;
    width: calc(100% - 40px);
    height: 82px;
    padding: 10px 20px;
    color: #999;
}
.item >>> .van-image__img{
    border-radius: 7px;
}

.bookInfo{
    position: absolute;
    left: 104px;
    top: 18px;
    font-size: 14px;
    line-height: 23px;
    width: calc(100% - 116px);
}
.name{
    font-size: 17px;
    font-weight: 500;
    color: #000;
}
.fictionAuthor{
    font-size: 14px;
}
span.h{
    background: #f00;
    width: 7px;
    height: 7px;
}
.delete-button {
    height: 100%;
}
</style>